<template>
  <div class="login">
    <van-nav-bar title="登录">
      <template #left>
        <div class="reg" @click="goHome">回到首页</div>
      </template>
      <template #right>
        <div class="reg" @click="goReg">去注册</div>
      </template>
    </van-nav-bar>
    <div class="login">
      <van-form @submit="login" class="text">
        <van-field
          v-model="userLogin.phone"
          name="phone"
          label="手机号"
          placeholder="你的手机号"
          :rules="[
            { required: true, message: '手机号不能为空' },
            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
          ]"
        />
        <van-field
          v-model="userLogin.password"
          :type="isLoginEye ? 'text' : 'password'"
          name="password"
          label="密码"
          :right-icon="isLoginEye ? 'eye-o' : 'closed-eye'"
          placeholder="请输入密码"
          :rules="[
            { required: true, message: '密码不能为空' },
            {
              pattern: /^[A-Za-z]\w{5,15}$/,
              message: '支持数字字母下划线组合且须以字母开头',
            },
          ]"
          @click-right-icon="setPasswordStatus('isLoginEye')"
        />
        <div class="btn">
          <van-button class="login-btn">登录</van-button>
        </div>
      </van-form>
      <div class="tips">温馨提示：还未注册账号的请先去注册账号</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Login",
  data() {
    return {
      isLoginEye: false,
      //用户登录数据
      userLogin: {
        phone: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    setPasswordStatus(key) {
      this[key] = !this[key];
    },
    //登录验证
    login() {
      let userData = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      if(userData.length <= 0){
        Toast('账号不存在,请先去注册')
      }
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === this.userLogin.phone) {
          // console.log("当前手机号存在, 则进行登录");
          //验证密码
          if (userData[i].password === this.userLogin.password) {
            Toast("登录成功");
            setTimeout(() => {
              this.$router.push({
                name: "Recommend",
              });
            }, 2000);
            sessionStorage.clear();
            // 设置临时账号数据
            sessionStorage.setItem("user", JSON.stringify(userData[i]));
            // console.log(sessionStorage.getItem("user"));
          } else {
            Toast("账号/密码错误,请重新输入");
          }
          break;
        }
      }
    },
    goReg() {
      this.$router.push({
        name: "Registered",
      });
    },
    goHome() {
      this.$router.push({
        name: "Recommend",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 667px;
  background-color: #f4f4f4;
  .reg {
    font-size: 12px;
    color: #ff9db5;
  }
  .text {
    margin-top: 20px;
  }
  .btn {
    margin-top: 20px;
    text-align: center;
    .login-btn {
      width: 300px;
      height: 40px;
      font-size: 14px;
      border-radius: 4px;
      color: #ffffff;
      background-color: #ff9db5;
    }
  }
  .tips {
    text-align: center;
    margin-top: 20px;
    color: #ff9db5;
  }
}
</style>